<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        input[type="button"] {
            width: 50px;
            height: 50px;
        }
    </style>
    <script>
        //定义一个存放操作符的变量 
        var operator; 
        //定义两个存放操作数的变量
        var  num1="",num2="";  
        //定义是否按下了操作符
        var operFlag = false;
         //定义处理数字按键输入的方法
         function press(x){
             //将输入的数字，加到结果显示框的末尾
         var obj  = document.getElementById("txtResult");
             obj.value = x;
             if(operFlag)   //如果已经输入了操作符，则放入num2中
                num2 =x;
             else
                num1 =x;
         }
         //定义处理+/-*/ 操作符按键输入的方法
         function operate(x){
             //设置用户已经按下了操作符的标识
             operFlag = true;
             //保存第一操作数
            num1  = document.getElementById("txtResult").value;
             //保存输入的操作符
             operator = x;     
             //将输入的操作符，加到结果显示框的末尾
            var obj  = document.getElementById("txtResult");
             obj.value =x
     
         }
         
         //定义处理 = 按键输入的方法
         function calculate(){
            var result;
            if( operator == '+') 
           result =parseInt(num1)+parseInt(num2);
            else if( operator == '-') 
           result =parseInt(num1)-parseInt(num2);
           else if( operator == '*' ) 
           result = parseInt(num1) * parseInt(num2);
           else if( operator == '/' ) 
           result = parseInt(num1) / parseInt(num2);
     
           //显示结果
           var obj  = document.getElementById("txtResult");
           obj.value =result;
         
         }
     </script>

</head>
<body>
    <input type="text" id="txtResult" readonly>
    <br>
    <input type="button" value="1" onclick="press('1')">
    <input type="button" value="2" onclick="press('2')">
    <input type="button" value="3" onclick="press('3')">
    <input type="button" value="+" onclick="operate('+')">
    <br>
    <input type="button" value="4" onclick="press('4')">
    <input type="button" value="5" onclick="press('5')">
    <input type="button" value="6" onclick="press('6')">
    <input type="button" value="-" onclick="operate('-')">
    <br>
    <input type="button" value="7" onclick="press('7')">
    <input type="button" value="8" onclick="press('8')">
    <input type="button" value="9" onclick="press('9')">
    <input type="button" value="*" onclick="operate('*')">
    <br>
    <input type="button" value="C" onclick="clearDisplay()">
    <input type="button" value="0" onclick="operate('0')">
    <input type="button" value="=" onclick="calculate()">
    <input type="button" value="/" onclick="operate('/')">
</body>
</html>